<template>
    <div :style="{'width': '100%','height': height+'px','margin-top': '5px'}">
        <el-amap class="amap-box" :zoom="zoom" :center="liveAddress.center" :mapStyle="mapStyle"
                 :dragEnable="dragEnable" :zoomEnable="zoomEnable"
                 :plugin="plugin"
                 :events="events"
        >
            <el-amap-marker v-if="markers" v-for="marker in markers" :position="marker.position" :key="marker.id"
                            :events="marker.events"></el-amap-marker>
            <el-amap-info-window v-if="window" :position="window.position" :visible="window.visible"
                                 :content="window.content" :offset="window.offset"></el-amap-info-window>
            <!--<el-amap-polygon v-for="poly in polygons" :path="poly.path" :key="poly.id"-->
            <!--fillColor="rgba(0,216,255,.5)" strokeColor="#f0f" strokeOpacity="0.5"-->
            <!--strokeStyle="dashed"></el-amap-polygon>-->

        </el-amap>
    </div>
</template>

<script>

    /**
     *
     * 抛出事件：
     *      地图本身事件：
     *          initlivepositionievent：初始化当前位置事件
     *          changelivepositionevent：位置点击改变事件
     *          livepositionievent：位置实时追踪事件-上面两个都有
     *      标记事件：
     *          markerclickevent：标记点击事件
     *
     */
    export default {
        data() {
            let _self = this;
            return {

                //点击移动位置
                liveAddress: {
                    center: [121.18112, 37.56352]
                },

                //地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默认范围[3-19]，取值范围[3-19]
                zoom: 5,
                //设置地图显示样式，目前支持 normal（默认样式）、dark（深色样式）、light（浅色样式）、fresh(osm清新风格样式)四种
                mapStyle: 'normal',
                dragEnable: true, //是否允许四周拖拽
                zoomEnable: true, //是否允许缩放

                //标记信息
                markers: [],

                //自定义事件 - 地图级事件
                events: {
                    // 点击获取地址的数据
                    click: (e) => {
                        //清理窗口
                        _self.windows.forEach(window => {
                            window.visible = false; //关闭窗体
                        });

                        let {lng, lat} = e.lnglat;
                        // 这里通过高德 SDK 完成。
                        let geocoder = new AMap.Geocoder({
                            radius: 1000,
                            extensions: 'all'
                        });
                        geocoder.getAddress([lng, lat], function(status, result) {
                            console.log('获取点击位置');
                            if (status === 'complete' && result.info === 'OK') {
                                if (result && result.regeocode) {
                                    let addressInfo = {
                                        //Q、R明细经纬度  lat/lng 精度为4的经纬度
                                        R: lng,
                                        lng: lng,
                                        Q: lat,
                                        lat: lat,
                                        //地图全文本地址
                                        address: result.regeocode.formattedAddress,
                                        //地图省市区
                                        province: result.regeocode.addressComponent.province,
                                        //市名
                                        city: result.regeocode.addressComponent.city,
                                        //市编号
                                        citycode: result.regeocode.addressComponent.citycode,
                                        //区县
                                        district: result.regeocode.addressComponent.district,
                                        //所属道路
                                        street: result.regeocode.addressComponent.street,
                                        //街道 - 古现街道
                                        township: result.regeocode.addressComponent.township,
                                        //牌号 - 302号
                                        streetNumber: result.regeocode.addressComponent.streetNumber
                                    };
                                    addressInfo.addressDetail = addressInfo.province
                                        + '-' + addressInfo.city
                                        + '-' + addressInfo.district
                                        + '-' + addressInfo.township
                                        + '-' + addressInfo.street
                                        + '-' + addressInfo.streetNumber
                                        + '（' + addressInfo.address + '）'
                                    ;
                                    _self.getAddressAndMove(lng, lat, addressInfo, 'live');

                                }
                            }
                        });
                    }
                },

                //窗体信息
                windows: [],
                window: '',

                //遮盖物
                polygons: [],

                //插件定义
                plugin: [{
                    enableHighAccuracy: true,//是否使用高精度定位，默认:true
                    timeout: 100,          //超过10秒后停止定位，默认：无穷大
                    maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                    convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                    showButton: true,        //显示定位按钮，默认：true
                    buttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角
                    showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                    showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                    panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                    // zoomToAccuracy: true,//定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
                    extensions: 'all',
                    pName: 'Geolocation', //当前位置
                    events: {
                        //点击事件
                        click(e) {
                            console.log('当前位置点击----');
                        },
                        //初始化事件
                        init(o) {
                            //根据地址实时获取 可以到最明细一级
                            o.getCurrentPosition((status, result) => {
                                console.log('获取当前位置');
                                if (status === 'complete' && result.info === 'SUCCESS') {
                                    let addressInfo = {
                                        //Q、R明细经纬度  lat/lng 精度为4的经纬度
                                        Q: result.position.Q,
                                        lat: result.position.lat,
                                        R: result.position.R,
                                        lng: result.position.lng,
                                        //地图全文本地址
                                        address: result.formattedAddress,
                                        //地图省市区
                                        province: result.addressComponent.province,
                                        //市名
                                        city: result.addressComponent.city,
                                        //市编号
                                        citycode: result.addressComponent.citycode,


                                        //区县
                                        district: result.addressComponent.district,
                                        //所属道路
                                        street: result.addressComponent.street,
                                        //街道 - 古现街道
                                        township: result.addressComponent.township,
                                        //牌号 - 302号
                                        streetNumber: result.addressComponent.streetNumber
                                    };
                                    addressInfo.addressDetail = addressInfo.province
                                        + '-' + addressInfo.city
                                        + '-' + addressInfo.district
                                        + '-' + addressInfo.township
                                        + '-' + addressInfo.street
                                        + '-' + addressInfo.streetNumber
                                        + '（' + addressInfo.address + '）'
                                    ;
                                    _self.getAddressAndMove(result.position.lng, result.position.lat, addressInfo);
                                } else {
                                    //根据IP地址获取，只能到市
                                    o.getCityInfo((status, result) => {
                                        console.log('getCityInfo');
                                        console.log(result);
                                        if (result && result.center) {
                                            let addressInfo = {
                                                lng: result.center[0],
                                                lat: result.center[1],
                                                address: result.province + ((result.city === result.province) ? '' : result.city),
                                                province: result.province,
                                                city: result.city,
                                                citycode: result.citycode
                                            };
                                            addressInfo.addressDetail = addressInfo.province
                                                + '-' + addressInfo.city
                                                + '（' + addressInfo.address + '）'
                                            ;
                                            _self.getAddressAndMove(result.center[0], result.center[1].lat, addressInfo);

                                        }
                                    });

                                }
                            });
                        },
                    }
                },
                    // {
                    //     // 工具栏
                    //     pName: 'ToolBar',
                    //     events: {
                    //         init(instance) {
                    //             console.log(instance);
                    //         }
                    //     }
                    // },
                    // {
                    //     // 鹰眼
                    //     pName: 'OverView',
                    //     events: {
                    //         init(instance) {
                    //             console.log(instance);
                    //         }
                    //     }
                    // },
                    {
                        // 地图类型
                        pName: 'MapType',
                        defaultType: 0,
                        events: {
                            init(instance) {
                                console.log(instance);
                            }
                        }
                    },
                    {
                        // 搜索
                        pName: 'PlaceSearch',
                        events: {
                            init(instance) {
                                console.log(instance);
                            }
                        }
                    }
                ]
            };
        },
        props: {
            //高度
            height: {
                type: Number,
                default: 600
            },
            //初始地点值，空，使用当前位置标记
            addressInitInfoArr: {
                type: Array,
                default() {
                    return [];
                }
            },
            remark: {
                type: Boolean,
                default: true
            }
        },
        computed: {
            currentAddress: {
                get() {
                    return this.$store.state.map.currentAddress;
                },
                set(val) {
                    this.$store.commit('updateCurrentAddress', val);
                }
            }
        },
        methods: {

            /**
             *根据点击增加标记和提示
             * 两种调度方式：
             *      1、resetMakers()，不带入参数，即使用 prop传入集合；当前使用：通过ref直接使用初始值
             *      2、resetMakers(addressInfoMap)，带入参数，通过参数自己设定初始值；当时使用：通过参数设定初始值
             *  addressInfoMap 初始化标记集合，若不存在，使用外部传递的标签集合
             *      lng：经度
             *      lat：维度
             *      addressDetail：弹窗内容，主体展示地址信息，也自定义信息。
             * */
            resetMakers(addressInfoMap) {
                let addressInfoArr = [];
                if (!addressInfoMap) {
                    addressInfoArr = this.addressInitInfoArr;
                } else {
                    addressInfoArr.push(addressInfoMap);
                }
                let markers = [];
                let windows = [];
                let _self = this;
                addressInfoArr.forEach((addressInfo, index) => {
                    markers.push({
                        position: [addressInfo.lng, addressInfo.lat],
                        events: {
                            click() {
                                //点击显示窗体数据
                                _self.windows.forEach(window => {
                                    window.visible = false; //关闭窗体
                                });
                                _self.window = _self.windows[index];
                                _self.$nextTick(() => {
                                    _self.window.visible = true;//点击点坐标，出现信息窗体
                                });

                                //转移中心到当前标记点
                                let addressInfoTemp = addressInfo;
                                addressInfoTemp.addressDetail = addressInfo.addr;
                                _self.getAddressAndMove(addressInfo.lng, addressInfo.lat, addressInfoTemp, 'live');

                            }
                        }
                    });
                    //增加信息窗
                    windows.push({
                        position: [addressInfo.lng, addressInfo.lat],
                        content: `<div style="font-size: 10px;padding-right: 10px;">
                                    ${addressInfo.addressDetail}
                                    </div>`,//内容
                        offset: [0, -20],//窗体偏移
                        visible: false//初始是否显示
                    });
                });

                this.markers = markers;
                this.windows = windows;

                // let path = [];
                // let polygon = [];
                // pointMakers.forEach(item => {
                //     path.push([item.lng, item.lat]);
                // });
                // polygon.push({path: path});
                // //添加区域覆盖物
                // this.polygons = polygon;

            },

            /**
             *
             * 获取地址信息设置为中心 - 经纬度
             * @param lng 精度
             * @param lat 维度
             * @param addressInfo 地址对象，存储全部地址信息
             * @param type live:实时
             */
            getAddressAndMove(lng, lat, addressInfo, type) {

                addressInfo.center = [addressInfo.lng, addressInfo.lat];
                this.liveAddress = addressInfo;
                if (!type) {
                    console.log('加载当前位置成功 - 不变的个人位置');
                    this.currentAddress = addressInfo;
                    //初始化位置时，事件抛出
                    console.log('initlivepositionievent');
                    this.$emit('initlivepositionievent', addressInfo);

                    //没有时，直接使用初始标记；有时，不能重置初始标记点
                    if (this.remark &&
                        !(this.addressInitInfoArr
                            && this.addressInitInfoArr.length > 0
                            && this.addressInitInfoArr[0].lng
                            && this.addressInitInfoArr[0].lat)
                    ) {
                        this.resetMakers(addressInfo);
                    }
                } else {
                    //位置改变事件抛出
                    console.log('changelivepositionevent');
                    this.$emit('changelivepositionevent', addressInfo);
                    //跟随点击移动标记
                    if (this.remark) {
                        this.resetMakers(addressInfo);
                    }
                }
                this.$emit('livepositionievent', addressInfo);

            }


        }
    };
</script>

<style scoped>
</style>